<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<html lang="en">
  <head>
    <title>Buscá el precio que conviene </title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    
    <% String pageContextPath = request.getContextPath(); %>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
    <!-- LESS -->
    <link rel="stylesheet" type="text/css" href="<%=pageContextPath%>/static/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="<%=pageContextPath%>/static/css/font-awesome.css" />
    <script type="text/javascript" src="<%=pageContextPath%>/static/js/less-1.4.1.min.js"></script> 
    <script type="text/javascript" src="<%=pageContextPath%>/static/js/bootstrap.min.js"></script>
    <!-- fin LESS -->
    <link href="https://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
	<script type="text/javascript" src="<%=pageContextPath%>/static/scripts/map.js"></script>
	<script type="text/javascript" src="<%=pageContextPath%>/static/scripts/knockout-2.3.0.js"></script>
	<script type="text/javascript" src="<%=pageContextPath%>/static/scripts/products.js"></script>
	<script type="text/javascript" src="<%=pageContextPath%>/static/scripts/global.js"></script>
    <style>
      input {
        border: 1px solid  rgba(0, 0, 0, 0.5);
      }
      input.notfound {
        border: 2px solid  rgba(255, 0, 0, 0.4);
      }
    </style>
    <script type="text/javascript">
    	var contextPath = "${pageContext.request.contextPath}";
    </script>
  </head>
  <body>
    <header class="navbar navbar-fixed-top navbar-inverse" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <h1 class="logo">
                <span>El precio que conviene</span>
                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="120px" height="95px" viewBox="0 0 120 95" enable-background="new 0 0 120 95" xml:space="preserve">
                    <rect x="41.064" y="4.283" fill="#508F9E" width="37.241" height="43.703"/>
                    <rect x="59.685" y="4.283" fill="#3E7985" width="18.621" height="43.703"/>
                    <polygon fill="#2E5A65" points="59.685,62.904 41.064,47.986 59.685,47.986 "/>
                    <g>
                        <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M70.415,30.362H53.778l0.261,1.61l13.793,0.008l-0.256,1.568
                            H51.975L49.413,17.74l-1.779,0.858l-0.274-1.719l3.928-1.856l0.729,4.729h20.108L70.415,30.362z M52.515,22.497l0.76,4.765h15.323
                            l0.776-4.782L52.515,22.497z"/>
                        <circle fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="55.421" cy="36.326" r="1.89"/>
                        <circle fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="64.294" cy="36.326" r="1.891"/>
                    </g>
                    <g>
                        <g>
                            <polygon fill="#508F9E" points="37.861,42.582 37.861,45.417 22.042,52.029 8.082,82.572 31.324,72.514 38.644,55.404 
                                40.668,55.269 35.197,72.56 57.559,85.618 58.889,75.514 59.698,75.514 59.698,89.55 32.892,76.468 6.521,86.716 4.524,84.288 
                                20.193,49.987       "/>
                            <polygon fill="#508F9E" points="81.536,42.582 81.536,45.417 97.354,52.029 111.314,82.572 88.072,72.514 80.753,55.404 
                                78.728,55.269 84.199,72.56 61.838,85.618 60.508,75.514 59.698,75.514 59.698,89.55 86.504,76.468 112.873,86.716 
                                114.872,84.288 99.203,49.987        "/>
                        </g>
                    </g>
                </svg>
            </h1>
          </a>
        </div>
        <div class="collapse navbar-collapse" id="menu">
          <ul class="nav navbar-nav">
            <!-- agregar class active a la seleccionada -->
            <li><a href="#" class="btnLocation" data-bind="css: { active: isLocationOptionVisible }, click: showLocationOption">
            	<i class="icon-map-marker icon-2x"></i><span>Mi localización</span></a>
            </li>
            <li><a href="#" class="btnSearch" data-bind="css: { active: isProductSearchVisible}, click: showProductOption">
            	<i class="icon-search icon-2x"></i><span>Buscar producto y/o servicio</span></a>
            </li>
            <li><a href="#" class="btnComments"><i class="icon-comments icon-2x"></i><span>Deja tu comentario</span></a></li>
            <li><a href="#" class="btnLogin"><i class="icon-male icon-2x"></i><span>Ingresar al sistema</span></a></li>
          </ul>
        </div><!-- /.nav-collapse -->
    </header>

	<div id="place-content">
	    <div id="panel" class="block blockLocation" style="display:none;">
	      <div class="triangle"></div>
	      <div class="content">
	          <!--<input id="searchTextField" class="form-control" type="text" placeholder="Default input">-->  
	          <h2>Ubicarme en el mapa</h2>
	          <div class="input-group">
	            <input type="text" class="form-control" id="searchTextField">
	            <span class="input-group-btn">
	              <button class="btn btn-default" type="button"><i class="icon-search"></i></button>
	            </span>
	          </div>        
	      </div>
	    </div>

        <div id="login-content">
            <div class="block blockLogin" style="display:none;">
                <div class="triangle"></div>
                <form class="form-horizontal" role="form" onsubmit="ajaxLogin(this)">
                    <div class="content">
                        <h2>Ingresar al sistema</h2>
                        <div class="form-group">
                            <label for="inputEmail1" class="col-lg-12">Email</label>
                            <div class="col-lg-12">
                              <input type="text" class="form-control" name="j_username" id="j_username" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword" class="col-lg-12">Password</label>
                            <div class="col-lg-12">
                              <input type="password" class="form-control" name="j_password" id="j_password" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-12">
                              <div class="checkbox">
                                <label>
                                  <input type="checkbox" class="remember"> Recordar mi contraseña <br><a href="#" class="btn btn-link">¿Olvide mi contraseña?</a>
                                </label>
                              </div>
                            </div>
                        </div>             
                    </div>
                    <footer>
                        <div class="col-lg-12">
                            <button type="button" class="btn btn-default">Ingresar</button>
                            <button type="button" class="btn btn-default">Registrarse</button>
                        </div>
                        <div class="alert alert-danger col-lg-offset-2 col-lg-10" id="error-message" style="display: none;">
                            <strong>Ups!</strong> El e-mail o contraseña ingresdos no son correctos.<br> Vuelva a intentarlo nuevamente.
                        </div>
                    </footer>
                </form>
            </div>
        </div>

	    <div class="modal" id="modal-updatePrice">
	        <div class="modal-dialog">
	          <div class="modal-content">
	            <div class="modal-header">
	              <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove-sign"></i></button>
	              <h4 class="modal-title">Actualizar precio</h4>
	            </div>
	            <div class="modal-body">
	              <label>Nuevo Precio</label>
	              <input class="form-control" data-bind="value: priceText" type="text" placeholder="ingrese nuevo precio">
	            </div>
	            <div class="modal-footer">              
	              <button type="button" class="btn btn-primary" data-bind="click: addPrice">Guardar</button>
	            </div>
	          </div>
	        </div>
      	</div>
	</div>
	
	<div id="product-content">
	    <div id="products" class="block blockSearch" style="display:none;">
	        <div class="triangle"></div>
	        <div class="content">
	            <h2>Buscar producto/servicio</h2>
	            <div class="input-group">
	                <input type="text" class="form-control" id="searchItemField">
	                <span class="input-group-btn">
	                  <button class="btn btn-default" type="button"><i class="icon-search"></i></button>
	                </span>
	              </div>
	        </div>
	        <footer></footer>
	    </div>
	
	    <aside class="productList" data-bind="visible: productListVisible">
	        <header>Mis busquedas <i class="icon-remove-sign icon-2x" data-bind="click: removeAllProducts"></i></header>
	    	<div class="content">
	            <ul data-bind="foreach: products">
	                <li>
	                    <img src="http://placehold.it/70x70">
	                    <span data-bind="text: name, click: $parent.selectProduct"></span>
	                    <i class="icon-remove-sign icon-2x" data-bind="click: $parent.removeProduct"></i>
                        <i class="icon-pencil icon-2x"></i>
	                </li>
	            </ul>   
	        </div>
	    </aside>
    </div>
    <script>
        $("#searchItemField").autocomplete({
        	source: function (request, response) {
                $.getJSON("${pageContext.request.contextPath}/item/getItemsByKeyword", {
                    term: request.term
                }, response);
            },
            focus: function () {
                return false;
            },
            select: function (event, ui) {
                this.value = ui.item.label;
                var newProduct = new Product(ui.item.id, ui.item.label);
                productsViewModel.addProduct(newProduct);
                return false;
            }
        });
        
        function split(request, response) {
        	alert(request);
        }
    </script>
    <section class="map">
        <div id="map-canvas" class="mapCanvas"></div>
    </section>
    <footer class="footer">
        
    </footer>
    
    <!-- POPINS -->
    <!-- end POPINS -->

  </body>
</html>